<script setup>
import HomePanel from './HomePanel.vue'
import CompanyPanel from './CompanyPanel.vue'
import { findJobAPI, findCategory, findHotCompany } from '@/api/home.js'
import { getUserBaseInfo } from '@/api/userinfo.js'
import { reactive, ref, onMounted } from 'vue'
import router from '@/router'
const total = ref(30)
// 岗位分页基本属性
const Job_tablePage = reactive({
  catename: '机器学习',
  pageNum: 1,
  pageSize: 9
})

// 热门岗位数据
const list = ref([])

// 热门公司数据
const CompanyList = ref([])

// 分类数据
const catelist = ref([])

// 分类所属id
const parentId = ref(1)

// 当前分类名
const resentCateName = ref()

// 页面改变时触发
const handlePageChange = async (currentPage) => {
  Job_tablePage.pageNum = currentPage

  const res = await findJobAPI(
    Job_tablePage.catename,
    Job_tablePage.pageNum,
    Job_tablePage.pageSize
  )
  total.value = res.data.data.total
  list.value = res.data.data.list
}

// 获取分类名称列表
const getcatelist = async (parentId) => {
  const res = await findCategory(parentId.value)
  catelist.value = res.data.data
}

// 分类栏改变时触发
const tab_change = () => {
  Job_tablePage.catename = resentCateName.value
  handlePageChange(1)
}

// 获取热门公司
const getHotCompany = async () => {
  const res = await findHotCompany()
  console.log(res)
  CompanyList.value = res.data.data
}

// 前往公司页
const TurntoCompany = () => {
  router.push('/Company')
}
const sendtest = async () => {
  await getUserBaseInfo()
}
// 页面挂载时触发
onMounted(() => {
  handlePageChange(1)
  getHotCompany()
  getcatelist(parentId)
  console.log(catelist.value)
})

// 计算函数
const cal_Jobindex = (index) => {
  index = (index - 1) * 3

  if (index + 3 > list.value.length) return list.value.slice(index)
  else return list.value.slice(index, index + 3)
}

const cal_Companyindex = (index) => {
  index = (index - 1) * 4

  if (index + 4 > CompanyList.value.length)
    return CompanyList.value.slice(index)
  else return CompanyList.value.slice(index, index + 4)
}

const ceil = (index) => {
  return Math.ceil(index / 3)
}
</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-input placeholder="Please input" class="input-with-select">
        <template #prepend>
          <el-select placeholder="请选择城市" style="width: 120px">
            <el-option label="全国" value="" />
            <el-option label="北京" value="北京" />
            <el-option label="上海" value="上海" />
            <el-option label="武汉" value="武汉" />
          </el-select>
        </template>
        <template #append>
          <el-button class="iconfont icon-icon-serch" />
        </template>
      </el-input>
    </el-col>
  </el-row>

  <el-container>
    <el-header>
      <span>热门职业</span>
      <el-tabs v-model="resentCateName" @tab-change="tab_change">
        <el-tab-pane
          v-for="cate in catelist"
          :key="cate.id"
          :name="cate.name"
          :label="cate.name"
        >
        </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main>
      <el-row :gutter="20" v-for="index in ceil(list.length)" :key="index">
        <el-col :span="8" v-for="item in cal_Jobindex(index)" :key="item.id">
          <HomePanel
            :Jobname="item.name"
            :Salary="item.money"
            :loc="item.workAddress"
            :logo="item.logo"
            :companyName="item.companyName"
          />
        </el-col>
      </el-row>
      <el-row class="page">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="Job_tablePage.pageNum"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-main>
    <el-footer>
      <el-button type="primary" @click="sendtest">查看更多</el-button>
    </el-footer>
  </el-container>

  <el-container>
    <el-header>
      <span>热门企业</span>
    </el-header>
    <el-main>
      <el-row
        :gutter="10"
        v-for="index in Math.ceil(CompanyList.length / 4)"
        :key="index"
      >
        <el-col
          :span="6"
          v-for="item in cal_Companyindex(index)"
          :key="item.name"
        >
          <CompanyPanel
            :logo="item.logo"
            :name="item.name"
            :Hot_job="item.jobName"
            :Type="item.industry"
          />
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <el-button type="primary" @click="TurntoCompany">查看更多</el-button>
    </el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
.el-header,
.el-footer {
  text-align: center;
}
.el-header span {
  font-weight: 700;
  font-size: 30px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 10px;
}

.grid-content {
  width: 384px;
  height: 136px;
  border-radius: 4px;
  min-height: 36px;
  background-color: gray;
}
.page {
  justify-content: center;
}

.joblist-header-nav {
  width: 600px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: auto;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>
